<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>维修列表</title>
    <style>

        *{
            margin: 0px;
            padding: 0px;
        }


        .toast-center-center {
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -150px;
        }

    </style>
</head>
<body>


<%--添加按钮--%>
<div class="container shadow-sm p-3 mb-5 bg-white rounded">
    <%--添加按钮--%>
    <div class="row">
        <div class="col-12 col-md-12">
            <input id="inputSub" type="text" style="width: 250px;"  class="form-control border-info float-left rounded-right rounded-0 order-0"/>
            <button id="btn-sub" type="button" class="btn btn-info rounded-0">搜索设备</button>
            <button type="button" id="refreshData" class="btn bg-info rounded-0 text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
            </svg>刷新</button>
            <button id="delBtn" class="btn btn-info rounded-0"><!--删除按钮  -->
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                </svg>删除
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <%--打印数据--%>
            <table id="myType" data-mobile-responsive="true" style="table-layout:fixed;"></table>
        </div>

    </div>
</div>




</body>

<script type="text/javascript">

    var $table= $("#myType");
    var $insertBtn=$("#insert");
    //let state=true;//表示可插入状态
    var prefixPath="${pageContext.request.contextPath}";
    var val="";
    $(function () {
        //加载下拉框
        $('.dropdown-toggle').dropdown();

        $table.bootstrapTable(temp);
        //隐藏空白区域
        $(".fixed-table-container").hide();
        //重新请求
        $("#btn-sub").click(function () {
            val=$("#inputSub").val();
            $table.bootstrapTable('destroy');
            $table.bootstrapTable(temp);
           $(".fixed-table-container").hide();
        });


        $("#refreshData").click(function (){

            window.parent.frames.detailed("/pj/repairList");

        });

        customTips();
        delLRParam();
    });


    //配置
    var temp={
        striped:false,//隔行变色
        method:'get',//请求格式
        url:'${pageContext.request.contextPath}/rep/repList',//请求地址
        pageNumber : 1, //初始化加载第一页
        pagination : true,//是否分页
        sidePagination : 'client',//server:服务器端分页|client：前端分页
        pageSize : 3,//单页记录数
        pageList : [4,6,8],//可选择单页记录数
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        toolbar:'#myType',//容器
        sidePagination:'client',//在前端(client)或者后端(server)进行分页
        queryParams:function (params) {
            var temp={
                limit : params.limit, // 每页显示数量
                offset : params.offset, // SQL语句起始索引
                name:val,
            }
            return temp;
        },
        columns:[
            {
                field:"box",
                checkbox:true,//显示多选
                align:'center'
            }, {
                title:'序号',
                align:'center',
                field:"nums",
                formatter:function (value, row, index) {
                    //value：该cell本来的值，row：该行数据，index：该行序号（从0开始）
                    return index+1;
                }
            },{
                field:"id",
                visible:false,//隐藏
            }, {
                title:'设备名',
                field:'eName',//该列映射的data的参数名
                align:'center',

            },{
                title:'类型',
                field:'etype',//该列映射的data的参数名
                align:'center',

            },{
                title:'型号',
                field:'model',//该列映射的data的参数名
                align:'center',

            },{
                title:'接收人地址',
                field:'deliveryPlace',//该列映射的data的参数名
                align:'center',

            },{
                title:'维修人',
                field:'repairman',//该列映射的data的参数名
                align:'center',

            },{
                title:'送修时间',
                field:'giveRepair',//该列映射的data的参数名
                align:'center',

            },{
                title:'损坏原因',
                field:'reason',//该列映射的data的参数名
                align:'center',

            }, {
                title:'操作',
                align:'center',
                field: 'ops',
                formatter:getOperation
            }
        ]
    };

    function getOperation(value,row,index) {
        var id=row.id;
        console.log(id);
        var result="<button class='btn btn-info' onclick='del("+id+")'><svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'>"
        	  +"<path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/>"
        		  +"<path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/>"
        		+"</svg>删除</button>";
        return result;
    }

    //批量删除
    function delLRParam() {
        $("#delBtn").click(function () {
            var url="${pageContext.request.contextPath}/rep/del";
            var ids=$.map($table.bootstrapTable("getSelections"),function (row) {
                return row.id;
            });
            var arr= Object.values(ids);
            if (ids.length>0){

                $.ajax({
                    type:"get",
                    url:url,
                    dataType:"json",
                    traditional: true,
                    contentType: "application/json",
                    data:{"param":JSON.stringify(arr)},
                    success:function (obj) {
                        if (obj.state){
                            toastr.success("删除成功");
                            $table.bootstrapTable('remove',{field:'id',values:ids})
                        }else{
                            toastr.error("删除失败");
                        }
                    },
                    erorr:function (obj) {
                        toastr.error("删除失败");
                    }

                });

            }else{
                toastr.warning("请选择行");
            }
        });


    }
    
    

    
    

    //删除
    function  del(id) {
        var f= confirm("是否要删除？");
        if (f){
            var url="${pageContext.request.contextPath}/rep/del";
            var arr=new Array();
            arr[0]=parseInt(id);
            var msg={"param":JSON.stringify(arr)};
            $.get(url,msg,function (data) {
                var d= JSON.parse(data);
                if (d.state){
                    $table.bootstrapTable('remove',{
                        field: 'id',
                        values: [id]
                    })
                    toastr.success("删除成功");
                }else {
                    toastr.error("服务器繁忙");
                }
            });
        }
    }







</script>


</html>
